<template>
  <div class="strut-div">
    <div class="card-item" style="height:246px;">
      <p class="card-title">农产品市场</p>
      <div class="card-div">
        <common-pieNew-chart ref="agriculturalPie" :config='agriculturalPieConfig'></common-pieNew-chart>
      </div>
    </div>
    <div class="card-item" style="height:480px;margin-top:18px;">
      <p class="card-title">农产品TOP5</p>
      <div class="card-div top-wrap">
        <div class="top-box">
          <top-bar-chart ref="vegetablesBar" :config="vegetablesTopConfig"></top-bar-chart>
        </div>
        <div class="top-box">
          <top-bar-chart ref="fruitBar" :config="fruitTopConfig"></top-bar-chart>
        </div>
        <div class="top-box">
          <top-bar-chart ref="animalProductsBar" :config="animalProductsTopConfig"></top-bar-chart>
        </div>
        <div class="top-box">
          <top-bar-chart ref="foodstuffBar" :config="foodstuffTopConfig"></top-bar-chart>
        </div>

      </div>
    </div>
    <div class="card-item" style="height:315px;margin-top:18px;">
        <p class="card-title">主导产业数据</p>
        <div class="card-div">
            <common-dualarea-chart ref="leadingIndustryLine" :config="leadingIndustryLineConfig"></common-dualarea-chart>
        </div>
    </div>
    <div class="card-item" style="height:250px;margin-top:20px;">
        <p class="card-title">土地流转数据</p>
        <div class="card-div land-wrap">
            <div class="land-box">
                <common-pieNew-chart ref="landRatePie" :config='landRatePieConfig'></common-pieNew-chart>
            </div>
            <div class="land-box">
                <common-pieNew-chart ref="landFormPie" :config='landFormPieConfig'></common-pieNew-chart>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
  import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
  import CommonDualareaChart from "@/components/common/common-dualarea-chart.vue";

  import topBarChart from './top-bar-chart.vue';

  import {
    farmProduceOutputValue,
    farmProduceMartTop,
    enterpriseOutputValueTrend,
    andTransferRate,
    formOfLandTransfer
  } from '@/network/tg-fake-data.js';

  export default {
    name: 'sxLeft',
    components: {
      CommonPieNewChart,
      CommonDualareaChart,
      topBarChart
    },
    data() {
      return {
        agriculturalPieConfig: {
          option: {
            title: '',
            id: 'agriculturalPie',
            color: ['#7264F7', '#AC4BFC', '#EDA652', '#08C49A', '#19AEF1', '#00EAFF'],
            tooltip: {
              show: true,//防止鼠标移到不需要的数据上弹出label
              trigger: 'item',
              formatter: "{a} {b} : {c} ({d}%)"
            }, 
            legend: {
              show: true,
              x: "80%",
              //   y: "bottom",
              orient: 'vertical',
              textStyle: {
                color: ['#7264F7', '#AC4BFC', '#EDA652', '#08C49A', '#19AEF1', '#00EAFF'],
                fontSize: 14,
              },
              padding: 20,
              itemGap: 20,
              data: []
            },

            series: [{
              name: '',
              type: 'pie',
              radius: [40, 80],
              center: ['40%', '50%'],
              label: {
                color: "#fff",
                formatter: '{a} {b} :{c}({d}%)'
              },
              labelLine: {
                length: 10,
                length2: 40,
              },
              data: []
            }]
          }
        },
        vegetablesTopConfig: {
          id: 'vegetablesTop',
          option: {
            title: {
              text: '蔬菜TOP5（单位：千克）',
              textStyle: {
                color: '#FFFFFF',
                fontSize: 16
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '0%',
              right: '10%',
              top: '15%',
              bottom: '0%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              min: 0,
              max: null,
              axisLabel: {
                color: "#E1E7FB"
              }
            },
            yAxis: {
              type: 'category',
              axisLabel: {
                color: '#E1E7FB',
                fontSize: 16
              },
              data: []
            },
            series: [{
              name: '',
              type: 'bar',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#4465F3' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#00FAFF' // 100% 处的颜色
                }],
              },
              barWidth: 10,
              itemStyle: {
                barBorderRadius: 5
              },
              data: []
            }]
          }
        },
        fruitTopConfig: {
          id: 'fruitTop',
          option: {
            title: {
              text: '水果TOP5（单位：千克）',
              textStyle: {
                color: '#FFFFFF',
                fontSize: 16
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '0%',
              right: '10%',
              top: '15%',
              bottom: '0%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              min: 0,
              max: null,
              axisLabel: {
                color: "#E1E7FB"
              }
            },
            yAxis: {
              type: 'category',
              axisLabel: {
                color: '#E1E7FB',
                fontSize: 16
              },
              data: []
            },
            series: [{
              name: '',
              type: 'bar',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#812DFF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#341CE9' // 100% 处的颜色
                }],
              },
              barWidth: 10,
              itemStyle: {
                barBorderRadius: 5
              },
              data: []
            }]
          }
        },
        animalProductsTopConfig: {
          id: 'animalProductsTop',
          option: {
            title: {
              text: '畜产品TOP5（单位：千克）',
              textStyle: {
                color: '#FFFFFF',
                fontSize: 16
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '0%',
              right: '10%',
              top: '15%',
              bottom: '0%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              min: 0,
              max: null,
              axisLabel: {
                color: "#E1E7FB"
              }
            },
            yAxis: {
              type: 'category',
              axisLabel: {
                color: '#E1E7FB',
                fontSize: 16
              },
              data: []
            },
            series: [{
              name: '',
              type: 'bar',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#FF942C' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#FCFF00' // 100% 处的颜色
                }],
              },
              barWidth: 10,
              itemStyle: {
                barBorderRadius: 5
              },
              data: []
            }]
          }
        },
        foodstuffTopConfig: {
          id: 'foodstuffTop',
          option: {
            title: {
              text: '粮食TOP5（单位：千克）',
              textStyle: {
                color: '#FFFFFF',
                fontSize: 16
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '0%',
              right: '10%',
              top: '15%',
              bottom: '0%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              min: 0,
              max: null,
              axisLabel: {
                color: "#E1E7FB"
              }
            },
            yAxis: {
              type: 'category',
              axisLabel: {
                color: '#E1E7FB',
                fontSize: 16
              },
              data: []
            },
            series: [{
              name: '',
              type: 'bar',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#44F348' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#E4FF00' // 100% 处的颜色
                }],
              },
              barWidth: 10,
              itemStyle: {
                barBorderRadius: 5
              },
              data: []
            }]
          }
        },
        leadingIndustryLineConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'leadingIndustryLine',
            x: ['2014年', '2015年', '2016年', '2017年', '2018年', '2019年'],
            y: [{
              axis: {
                min: 0,
                max: null,
                offset:0,
                name:"单位:(万元)"
              },
              title: '',
              data: [],
              startColor: "#FF9901",
              endColor: "#013366"
            }, {
              title: '',
              data: [],
              startColor: "#2D59E7",
              endColor: "#013366"
            }, {
              title: '',
              data: [],
              startColor: "#00FCFF",
              endColor: "#013366"
            }]
          }
        },
        landRatePieConfig:{
            option: {
            title: {
                text: '土地流转率',
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: 16
                },
                left: '20',
                bottom: '12'
            },
            id: 'landRatePie',
            color: ['#7264F7', '#AC4BFC', '#EDA652', '#08C49A', '#19AEF1', '#00EAFF', '#FFD003'],
            tooltip: {
              show: true,//防止鼠标移到不需要的数据上弹出label
              trigger: 'item',
              formatter: "{a} {b} : {c} ({d}%)"
            },
            legend: {
              show: true,
              x: "30%",
              y: "bottom",
              orient: 'horizontal',
              textStyle: {
                color: ['#7264F7', '#AC4BFC', '#EDA652', '#08C49A', '#19AEF1', '#00EAFF'],
                fontSize: 14,
              },
              padding: 20,
            //   itemGap: 20,
              data: []
            },

            series: [{
              name: '',
              type: 'pie',
              radius: [40, 70],
              center: ['50%', '40%'],
              label: {
                color: "#fff",
                formatter: '{d}%'
              },
              data: []
            }]
          }
        },
        landFormPieConfig:{
            option: {
            title: {
                text: '土地流转形式',
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: 16
                },
                left: '80',
                bottom: '12'
            },
            id: 'landFormPie',
            color: ['#7264F7', '#AC4BFC', '#EDA652', '#08C49A', '#19AEF1', '#00EAFF', '#FFD003'],
            tooltip: {
                show: true,//防止鼠标移到不需要的数据上弹出label
                trigger: 'item',
                formatter: "{a} {b} : {c} ({d}%)"
            },
            legend: {
              show: true,
              x: "70%",
            //   y: "bottom",
              orient: 'vertical',
              textStyle: {
                color: ['#7264F7', '#AC4BFC', '#EDA652', '#08C49A', '#19AEF1', '#00EAFF'],
                fontSize: 14,
              },
              padding: 20,
              itemGap: 15,
              data: []
            },

            series: [{
              name: '',
              type: 'pie',
              radius: [40, 70],
              center: ['40%', '40%'],
            //   label: {
            //     color: "#fff",
            //     formatter: '{d}%'
            //   },
              data: []
            }]
          }
        },
        farmProduceMartTop:JSON.parse(JSON.stringify(farmProduceMartTop))
      }
    },
    mounted() {
      this.initAgriculturaData();
      this.initVegetablesBarData();
      this.initFruitBarData();
      this.initAnimalProductsBarData();
      this.initFoodstuffBarData();

      this.initLeadingIndustryLineData();
      this.initLandData();
    },
    methods: {
      initAgriculturaData() {
        this.agriculturalPieConfig.option.legend.data = farmProduceOutputValue.legend;
        this.agriculturalPieConfig.option.series[0].data = farmProduceOutputValue.series.map((item, index) => {
          return {
            value: item,
            name: farmProduceOutputValue.legend[index]
          }
        });

        this.$refs.agriculturalPie.initChart();
      },
      initVegetablesBarData() {
        this.vegetablesTopConfig.option.yAxis.data = this.farmProduceMartTop.vegetables.xAxis.reverse();
        this.vegetablesTopConfig.option.series[0].data = this.farmProduceMartTop.vegetables.series.reverse();

        this.$refs.vegetablesBar.initChart();
      },
      initFruitBarData() {
        this.fruitTopConfig.option.yAxis.data =  this.farmProduceMartTop.fruit.xAxis.reverse();
        this.fruitTopConfig.option.series[0].data = this.farmProduceMartTop.fruit.series.reverse();

        this.$refs.fruitBar.initChart();
      },
      initAnimalProductsBarData() {
        this.animalProductsTopConfig.option.yAxis.data = this.farmProduceMartTop.animalProducts.xAxis.reverse();
        this.animalProductsTopConfig.option.series[0].data = this.farmProduceMartTop.animalProducts.series.reverse();

        this.$refs.animalProductsBar.initChart();
      },
      initFoodstuffBarData() {
        this.foodstuffTopConfig.option.yAxis.data = this.farmProduceMartTop.foodstuff.xAxis.reverse();
        this.foodstuffTopConfig.option.series[0].data = this.farmProduceMartTop.foodstuff.series.reverse();

        this.$refs.foodstuffBar.initChart();
      },
      initLeadingIndustryLineData() {
          this.leadingIndustryLineConfig.option.x = enterpriseOutputValueTrend.xAxis;
          enterpriseOutputValueTrend.names.forEach((item,index) => {
              this.leadingIndustryLineConfig.option.y[index].title = item;
              this.leadingIndustryLineConfig.option.y[index].data = enterpriseOutputValueTrend.series[index];
          })

          this.$refs.leadingIndustryLine.initChart();
      },
      initLandData() {
        this.landRatePieConfig.option.legend.data = andTransferRate.legend;
        this.landRatePieConfig.option.series[0].data = andTransferRate.series.map((item, index) => {
        return {
            value: item,
            name: andTransferRate.legend[index]
        }
        });

        this.landFormPieConfig.option.legend.data = formOfLandTransfer.legend;
        this.landFormPieConfig.option.series[0].data = formOfLandTransfer.series.map((item, index) => {
        return {
            value: item,
            name: formOfLandTransfer.legend[index]
        }
        });

        this.$refs.landRatePie.initChart();
        this.$refs.landFormPie.initChart();
      }
    }
  }

</script>

<style lang="scss" scoped>
  .top-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    .top-box {
      flex: none;
      width: 50%;
      height: 50%;
      padding: 20px;
      box-sizing: border-box;
    }
  }
  .land-wrap {
      display: flex;
      justify-content: space-between;

      .land-box {
          flex: 1;
          height: 100%;
      }
  }

</style>
